<!-- views/chatgpt.vue -->

<template>
 <div class="common-layout">
    <el-container>
      <el-header style="background-color:#00BFFF;">
      <!-- <el-header style="background-color:#ff8000;"> -->
        <h1>王宏的代理客服</h1>
        <!-- <h1>智能问答助手</h1> -->
      </el-header>
      <el-container>
        <!-- <el-aside style="background-color:#5f8000;text-align: center;"> -->
            <!-- <div style="width: 15px;margin: 100px auto; font-size: 30px; ">
                输入文字点击提交对 AI 进行提问
            </div> -->
        <!-- </el-aside> -->
        <el-container>
          <el-main style="background-color:#FFFFFF;height:500px">

            <!-- <el-descriptions column=1 size="small" border="true" style="width:1000px;" > -->
            <el-descriptions column=1 size="small" border="true" style="width:100%;" >
                <div v-for="item in messages" :key="item">
                    <el-descriptions-item :label="item.sender" label-align="center" >
                        <span v-html=item.message></span>
                    </el-descriptions-item>
                </div>
            </el-descriptions>
          </el-main>
          <el-footer style="padding:10px;height:300px;">
           <div style="width:100%; height: 200px;">
           <!-- <div style="width:1000px; height: 200px;"> -->
                <el-input v-model="inputMessage" type="textarea" placeholder="请输入你的问题" :autosize="{ minRows: 5, maxRows: 7 }" resize="none" show-word-limit maxlength="300"/>
                <div style="text-align: right;">
                    <el-button color="#8d3d45" @click="chat" plain style="margin: 5px 0;width:100px;" size="large" :disabled="click">提交</el-button>
                </div>
            </div>
          </el-footer>
        </el-container>
      </el-container>
    </el-container>
  </div>

</template>

<script>

export default {
    name: 'ChatGPT',
    data() {
        return {
            inputMessage: "",
            // count: 0,
            click: false,
            messages: [{ sender: "AI:", message: "您好，主人！有什么需要向我提问的吗？"}]
        }
    },
    methods: {
        chat() {
            //1、先存储用户消息
            var you = { sender: "YOU:", message: this.inputMessage };
            this.messages.push(you);

            const userText = this.inputMessage;
            this.inputMessage = "";//清空输入框

            //2、添加空的ai消息
            var ai = { sender: "AI:", message: "" };
            this.messages.push(ai);   
            
            //3、使用EventSource流式接收数据
            // this.click=true;
            let url = 'http://192.168.0.103:8899/chataiStream?message=' + userText;
            // let url = 'http://127.0.0.1:8899/chataiStream?message=' + userText;
            //let url = 'http://127.0.0.1:8080/request?inputMessage=' + this.inputMessage;
            // let url = 'https://chat-bot-29072-7-1316779917.sh.run.tcloudbase.com/request?inputMessage=' + this.inputMessage;
            let es = new EventSource(url);

            //4、监听流式返回数据，拼接AI回复
            es.onmessage = (event) => {
                // console.log(event.data);
                ai.message += event.data;//拼接内容
                if (event.data.toString() === "AIQA_EOF") {
                        es.close();
                    } 

                //触发视图更新，列表重新赋值
                this.messages = [...this.messages];
            };

            //如果没有以下两句，会导致不停地输出同样的回复
            es.onerror = function(error) {
                console.error('EventSource failed:', error);
                es.close();
            };

            // 确保在组件卸载或页面关闭时关闭EventSource连接
            window.addEventListener('beforeunload', function() {
                es.close();
            });
        }

        // openai版本

        // chat() {
        //   console.log("开始回答")
        //     this.click=true;
        //     let url = 'http://127.0.0.1:8899/chataiStream?message=' + this.inputMessage;
        //     //let url = 'http://127.0.0.1:8899/ollama?message=' + this.inputMessage;
        //     //let url = 'http://127.0.0.1:8080/request?question=' + this.inputMessage;
        //     // let url = 'https://chat-bot-29072-7-1316779917.sh.run.tcloudbase.com/request?question=' + this.inputMessage;
        //     var you = { sender: "YOU:", message: this.inputMessage };
        //     var ai = { sender: "AI:", message: "" };
        //     this.messages.push(you);
        //     this.messages.push(ai);
        //     this.inputMessage = "";
        //     let es = new EventSource(url);
        //     es.addEventListener('message', event => {
        //         console.log(event.data);
        //         this.count++;
        //         if (this.count > 2) {
        //匹配到结束提示，结束对话
        //             if (event.data.toString() === "Answer Done!") {
        //                 es.close();
        //                 this.count = 0;
        //                 this.click = false;
        //             } else {
        //                 var ai = this.messages[this.messages.length - 1]
        //                 ai.message += event.data;
        //                 this.messages[this.messages.length - 1] = ai;
        //             }
        //         }
        //     });

        // }
        
    }
}
</script>